<template>
  <div class="carbon-container">
    <div class="right-container">
      <div class="navigation-sidebar">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">
            <el-icon><Folder /></el-icon>
            建筑类</el-breadcrumb-item
          >
          <el-breadcrumb-item>
            <el-icon><Folder /></el-icon>
            建筑材料</el-breadcrumb-item
          >
          <el-breadcrumb-item>
            <el-icon><Folder /></el-icon> 大理石</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>

      <div class="content-area">
        <component
          :is="currentComponent"
          @changeModel="getChangeModel"
          @changeNoIndex="changeNoIndex"
          @saveToNextStep="saveToNextStep"
          @goNav="goNav"
        ></component>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { ArrowRight } from "@element-plus/icons-vue";
  import Home from "../home/index.vue";
  import LCABasic from "../LCABasic/index.vue";
  import ProductBasic from "../productBasic/index.vue";
  import Material from "../material/index.vue";
  import editMaterial from "../material/components/editMaterial.vue";
  import ProduceProcess from "../produceProcess/index.vue";
  import ProductUse from "../productUse/index.vue";
  import editProductUse from "../productUse/components/editProductUse.vue";
  import editProduceProcess from "../produceProcess/components/editProduceProcess.vue";
  import resultAnalysis from "../resultAnalysis/index.vue";
  import studyReport from "../studyReport/index.vue";
  import ProductDistribution from "../productDistribution/index.vue";
  import editProductDistribution from "../productDistribution/components/editProduceDistribution.vue";
  import ProductDiscard from "../productDiscard/index.vue";
  import editProductDiscard from "../productDiscard/components/editProductDiscard.vue";

  const currentComponent = ref(Home);
  //首页的组件切换逻辑
  const getChangeModel = (val) => {
    switch (val) {
      case 1:
        currentComponent.value = LCABasic;
        break;

      case 2:
        currentComponent.value = ProductBasic;
        break;
      case 3:
        currentComponent.value = Material;
        break;
      case 4:
        currentComponent.value = ProduceProcess;
        break;
      case 5:
        currentComponent.value = ProductDistribution;
        break;
      case 6:
        currentComponent.value = ProductUse;
        break;
      case 7:
        currentComponent.value = ProductDiscard;
        break;

      case 8:
        currentComponent.value = resultAnalysis;
        break;
      case 9:
        currentComponent.value = studyReport;
        break;
      default:
        break;
    }
    // console.log("子组件传递过来的值", val);
  };
  //非首页组件切换逻辑
  const changeNoIndex = (val) => {
    // console.log("子组件传递过来的值", val);
    switch (val) {
      case "editMaterial":
        console.log("子组件传递过来的值", val);
        currentComponent.value = editMaterial;
        break;
      case "editProduceProcess":
        currentComponent.value = editProduceProcess;
        break;

      case "editProductDistribution":
        currentComponent.value = editProductDistribution;
        break;
      case "editProductUse":
        currentComponent.value = editProductUse;
        break;
      case "editProductDiscard":
        currentComponent.value = editProductDiscard;
        break;

      default:
        break;
    }
  };
  const saveToNextStep = (val) => {
    switch (val) {
      case "one":
        currentComponent.value = ProductBasic;
        break;
      case "two":
        currentComponent.value = Material;
        break;
      case "three":
        currentComponent.value = ProduceProcess;
        break;
      case "four":
        currentComponent.value = ProductDistribution;
        break;
      case "five":
        currentComponent.value = ProductUse;
        break;
      case "six":
        currentComponent.value = ProductDiscard;
        break;
      case "seven":
        currentComponent.value = resultAnalysis;
        break;
      case "eight":
        currentComponent.value = studyReport;
        break;
    }
  };
  const goNav = () => {
    currentComponent.value = Home;
  };
</script>

<style lang="scss" scoped>
  .carbon-container {
    display: flex;
    flex: 1;
    min-height: 100vh;
    background-color: white;
  }

  .el-breadcrumb {
    padding-left: 28px;
  }
  .right-container {
    flex: 1;
    position: relative;
    padding: 10px 24px 24px 24px;
    .navigation-sidebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .content-area {
    // flex: 1;
    // padding: 10px 24px 24px 24px;
  }

  .form-sections {
    .head-com-container {
      .el-icon {
        cursor: pointer;
      }
    }
  }

  .left-section,
  .right-section {
    flex: 1;
  }

  .arrow {
    align-self: center;
    color: #2e7d32;
    font-size: 24px;
    margin: 0 8px;
    position: absolute;
  }
  .arrow-connector {
    @extend .arrow;
    top: 43%;
    left: 49%;
  }
  .arrow-connector2 {
    @extend .arrow;
    top: 43%;
    left: 32.5%;
  }
  .arrow-connector3 {
    @extend .arrow;
    top: 43%;
    left: 65.8%;
  }
  .arrow-connector4 {
    @extend .arrow;
    top: -35%;
    left: 78%;
  }
  .arrow-connector5 {
    @extend .arrow;
    top: 43%;
    left: 49%;
  }
</style>
